iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
3
Modern Web

Half-Stack Developer 養成計畫系列 第 6

我跟 Java 真的沒關係:JavaScript

  • 分享至 

  • xImage
  •  

我跟 Java 真的沒關係:JavaScript

Java 跟 JavaScript 的關係大概就跟周潤發與周星馳的關係一樣。至於是什麼關係,這件事情只有三個人知道,一個是我、一個看過與龍共舞的人,還有一個我不能說。但如果你真的很想知道為什麼要叫 JavaScript,Google 大神永遠歡迎你。

在你學會 HTML 跟 CSS 以後,其實你就已經有能力打造出一個很漂亮的網頁。CSS Zen Garden就是這樣的一個地方,大家都用同一套 HTMl,只更改 CSS,然後你會很驚訝居然換一套 CSS 就差那麼多,感覺是截然不同的兩個網頁。

只是,缺點就是這些網頁都不會「動」,沒有辦法跟使用者互動。(其實你硬要也是可以啦,有些 CSS 可以達成互動的效果,但那個比較進階所以我們在這邊先不提)如果需要互動的話,你就必須在網頁上寫點小程式。那通常提及到在網頁上寫程式的話,就是在指我們今天的主角:JavaScript 了。

之前有講到 CSS 會把它切割成獨立的一個檔案,JavaScript 也會。會用script標籤來引入。

<html>
<head>
  <link rel="stylesheet" type="text/css" href="cool.css">
  <script src="my.js"></script>
</head>
<body>
...
</body>
</html>

我們先來做個簡單的小範例,目標是點下去某個按鈕之後會跳出一個彈出式視窗

document.addEventListener("DOMContentLoaded", function(event) { 
  var btn = document.querySelector('#btn');
  btn.addEventListener('click', function() {
    alert('click!');
  })
});

這個程式碼乍看之下很難懂,但其實也就只有兩個概念你要搞定,第一個叫做callback function,回呼函式。我們來舉一個例子好了。

假設你今天到餐廳點餐,點完餐結帳之後老闆給你一個那種會發光發出聲音的呼叫器,這樣你就可以知道餐點好了然後過來拿。或者是,你去外地搭公車,然後深怕坐過站,所以你會跟司機講說:「到那個召喚峽谷的時候麻煩叫我一下」。

上面兩種情形,你都是針對某一個「事件」有興趣,所以希望當那個事件發生的時候可以通知到你。

在 JavaScript 裡面,也是一樣的概念。剛剛講的目標「點下去某個按鈕之後會跳出一個彈出式視窗」,所以我們必須:

  1. 在程式裡面取得按鈕
  2. 監聽按鈕的 click 事件
  3. 跳出彈出式視窗

第一步的話變成程式碼就是:var btn = document.querySelector('#btn');。這個#btn就跟你用 CSS 選擇器的時候一樣,會指定到 id 是 btn 的這個元素。所以,btn 這個變數就等於是這個按鈕的元素了。(當然,你在 HTML 裡面必須真的要有這個元素)。

第二步的話,我們可以用btn.addEventListener,第一個參數是你想監聽的事件,第二個參數就是我們最重要的callback function,我們可以先把程式碼變複雜一點,看你會不會比較能夠理解。

var btn = document.querySelector('#btn');
btn.addEventListener('click', onClick);

function onClick () {
  alert('click!');
}

btn.addEventListener('click', onClick); 的意思就是:當按鈕被按下去的時候,呼叫onClick這個函式,應該很好懂對吧!那在 JavaScript 裡面,有一種函式沒有名字,叫做匿名函式;有一種函式可以吃,叫做韓式料理;有一種函式有四隻腳,叫做韓式炸雞。(實在是爛透了,辛苦你們了)

匿名函式就是先把名字拿掉,例如說本來的 onClick 名字拿掉以後變成這樣:

function () {
  alert('click!');
}

這樣子是不是就沒有名字了,然後你再把這一段移到原本btn.addEventListener('click', onClick)onClick的位置:

var btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
  alert('click!');
});

薑薑薑薑~就是這麼一回事,這樣子你一樣可以達成按下按鈕之後呼叫某個函式的的目的,只是你直接把函式寫出來給他,而不是另外新建一個然後用名字去指定,這個函式因為沒有名字,所以就叫匿名函式。然後因為它是發生某個事件之後才會被呼叫到的,所以也叫做callback function

掰惹味,相傳匿名函式其實不是沒有名字,而只是忘記了自己的名字,真是可憐。咦?好像跟某個動畫很像,那我知道了,會不會匿名函式的真名其實叫做:塔矢亮函式。(我開玩笑的)

(其實我不是很確定上面這個 listener 的模式能不能被叫做callbak function,但我們就暫時理解成這樣好了,還盼望其他大大指正。)

既然這一段你懂了之後,我們再來看一次最初的範例:

document.addEventListener("DOMContentLoaded", function(event) { 
  var btn = document.querySelector('#btn');
  btn.addEventListener('click', function() {
    alert('click!');
  })
});

你可以發現這就只是把剛剛的招數重複運用兩次而已,我先聽DOMContentLoaded,這個事件觸發之後做事,做什麼事呢?就是我們剛剛上面寫的,幫按鈕加上click事件。會需要在最外層包上DOMContentLoaded是因為如果沒有這樣做,你會抓不到按鈕。因為在 JavaScript 剛執行的時候,網頁的這些元素根本還沒有被載入,所以你哪來的 button 可以操控?

因此,要等到DOMContentLoaded之後,你才能利用 JavaScript 去取得那些元素。

總之呢,最後我們終於成功達成了這個小小的目標。接下來我們再看第二個範例,希望可以有一個按鈕,按下去之後可以把第一篇文章隱藏;然後再按一次可以顯示。

我們可以直接先看成果:http://codepen.io/aszx87410/pen/mOXmYV

Imgur

HTML 的部分就只是多了一個<button id="toggle">hide</button>,JavaScript 則是如下:

document.addEventListener("DOMContentLoaded", function(event) { 
  
  var toggle = document.getElementById('toggle');
  var isVisible = true;
  toggle.addEventListener('click', function() {
    isVisible = !isVisible;
    var post = document.getElementsByClassName('post')[0];
    console.log(post);
    post.style.display = isVisible ? 'block' : 'none';
    toggle.innerHTML = isVisible ? 'hide' : 'show';
  })
});

仔細看你會發現,用到了兩個新的 function,getElementByIdgetElementsByClassName,這兩個函式我覺得你看名字就應該要知道它在做什麼了。其實跟querySelector滿類似的啦,所以這幾種都會看到有人用。我在這個範例特別用這個,只是想讓你知道有這個函式的存在,不然你去面試的時候被問這個,然後說一句:「我沒聽過」,就 GG 了。

另外的兩個重點就是取到元素之後可以用.style去改變 CSS,用.innerHTML去改變文字。如果你有一點程式基礎的話,上面這段程式碼應該不難,很容易就可以看懂。

如果你沒有程式基礎,強烈建議你趕快去補齊這一塊,隨便上網 Google:javascript 入門,或是 javascript 教學。通常排名排在前面的應該都還不錯啦,你也千萬不要來問我推薦什麼,你問我的話我也只會 Google 然後貼前幾名的結果給你。入門的教學都差不多,講來講去還不是都那些,與其一直想要找「最好的教學」,不如趕快從一份「堪用的教學」開始學起,之後再慢慢磨練自己的技能,這樣還比較實在。

因為 JavaScript 其實都是程式的部分,而我這一份系列教學的重點又不在程式基礎概念,所以我目前暫時沒想到還有什麼需要提醒大家的。總之呢,新手來學 JavaScript 第一個碰到最困擾的絕對就是匿名函式跟 callback function,不懂怎麼可以寫成這個樣子。但因為我上面講解過了,所以相信這部分對大家來說已經變成一塊巧克力蛋糕,上面還放一顆草莓的那種。

如果你想找一個快速又省錢的好方法來幫助你快速習得 JavaScript 這項技能,建議你可以參考這一堂課:JavaScript 程式設計新手村。也是課程內容豐富又划算,買了不會後悔。這不是我自己的課,所以沒有什麼利益關係,純粹推薦給大家我心目中覺得好的課程而已。

倘若你真的不想花任何錢,千萬不要來問我有沒有推薦什麼教學,沒有!你自己去 Google 找,通常排前幾名的都會是還不錯的教學,你就挑自己看得懂得看就好,看不懂的就直接關掉不要理它了。

在你透過自學看懂下面的 JavaScript 程式碼以後,你就差不多可以前往下一章了:

var str = 'abcde';
function reverse (str) {
  var ret = '';
  for(var i=str.length-1; i>=0; i--) {
    ret+=str[i];
  }
  return ret;
}

function reverse2 (str) {
  return str.split('').reverse().join('');
}

console.log(reverse(str) === reverse2(str));

上一篇
為自己的人生鮮艷上色:CSS
下一篇
我不是程式語言:jQuery
系列文
Half-Stack Developer 養成計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言